<template>
	<div>
		<div class="box">
			<ACollapse
				ref="ACollapse"
				v-for="(item, index) in details.productList"
				:open="open"
				style="width: 100%">
				<template #title>
					<div class="collapse_title">
						<div class="collapse_title_item">
							车型报价{{ index + 1 }}
						</div>

						<div class="collapse_title_item handler">
							<div
								class="remove handler-item"
								@click.stop="remove(index)"
								v-if="showRemove && state !== 'readonly'">
								删除
							</div>
							<div
								class="calc handler-item"
								@click.stop="calc(index)"
								v-if="state !== 'readonly'">
								测算
							</div>

							<div
								class="packUp handler-item"
								@click.stop="packUp(index, false)">
								<uni-icons
									custom-prefix="iconfont"
									type="icon-shouqi"></uni-icons>
							</div>
							<div
								class="packUp handler-item"
								@click.stop="packUp(index, true)">
								<uni-icons
									custom-prefix="iconfont"
									type="icon-zhankai"></uni-icons>
							</div>
						</div>
					</div>
				</template>
				<Content :index="index" ref="Content"></Content>
			</ACollapse>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import Content from '@/pages/quota/apply/coms/content/index.vue';
	export default {
		name: '',
		components: { Content },
		props: {},
		data() {
			return {
				open: true,
			};
		},
		inject: ['details_provide', 'config_provide', 'state_provide'],
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			productListLength() {
				let len = this.details?.productList?.length ?? 0;
				return len;
			},
			showRemove() {
				return this.details?.productList?.length > 1;
			},
		},
		created() {},
		mounted() {},
		methods: {
			packUp(i, status) {
				this.$refs.ACollapse?.forEach((item, index) => {
					if (i === index) {
						item.$children?.map(e => {
							e.changeACollapse?.(status);
						});
					}
				});
			},
			openAllACollapse() {
				this.$refs.ACollapse?.forEach(item => {
					item.openStatus();
					item.$children?.map(e => {
						e.openACollapse?.();
					});
				});
			},
			remove(index) {
				uni.showModal({
					title: '提示',
					content: `是否删除车型报价${index + 1}？`,
					success: res => {
						if (res.confirm) {
							this.details.productList?.splice(index, 1);
						} else if (res.cancel) {
						}
					},
				});
			},
			calc(index, type) {
				return this.$refs.Content[index].calc(type ?? 'single');
			},
			calcAll() {
				return new Promise(async (res, rej) => {
					let CarInfos = this.$refs.Content;
					let pass = false;
					let calcArr = [];
					for (let index = 0; index < CarInfos.length; index++) {
						calcArr.push(this.calc(index, 'all'));
					}
					Promise.allSettled(calcArr).then(args => {
						let errorIndex = args.findIndex(
							e => e.status === 'rejected',
						);
						if (errorIndex > -1) res(false);
						res(true);
					});

					// try {
					// 	for (let index = 0; index < CarInfos.length; index++) {
					// 		pass = await this.calc(index);
					// 		calcArr.push(this.calc(index));
					// 		if (!pass) {
					// 			res(false);
					// 			continue;
					// 		}
					// 	}
					// 	res(true);
					// } catch (error) {
					// 	console.log(error);
					// 	res(false);
					// }
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		gap: 15rpx 0;
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		.item {
			flex: 1;
			min-width: fit-content;
			line-height: 32rpx;
			padding: 20rpx 25rpx;
			text-align: center;
			transition: all 0.3s;
			border-bottom: 1px solid #fff;
		}
		.actived {
			color: rgb(0, 122, 255);
			border-bottom: 1px solid rgb(0, 122, 255);
		}
	}
	.collapse_title {
		// margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		.collapse_title_item {
			// line-height: 80rpx;
			font-weight: bold;
		}
		.handler {
			display: flex;
			// justify-content: flex-end;
			// gap: 0 15rpx;
			.handler-item {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.handler-item + .handler-item {
				padding: 0 10rpx;
				margin: 0 5rpx;
			}
			.handler-item.calc {
				background-color: #1aad19;
				color: #fff;
				margin: 0 15rpx;
				padding: 15rpx 22rpx;
				border-radius: 8rpx;
			}
		}
	}
	.box {
		// padding: 0 20rpx;
	}
</style>
